<template>
  <div class="container">
    展示locales配置的内容：
    <br>

    <!-- 方式一、直接页面内使用 : 更改locale.value时 可直接自动切换对应语言 -->
    方式一：{{ t("hello") }}
    <br/>
    方式一：{{ $t("hello") }}
    <br/>


    <!-- 切换语言模式按钮  (方式一、直接页面内使用 好处：更改locale.value时 可直接自动切换对应语言)-->
    <el-button @click="changeLanguage">
      {{ $i18n.locale }}
    </el-button>
  </div>
</template>
<script setup>
// 国际化
import {reactive, computed,getCurrentInstance} from "vue";
const {proxy: $vm} = getCurrentInstance()

import {useI18n} from "vue-i18n";
const I18n = useI18n()
let {t, locale} = I18n;

/**
 * 切换语言
 */
const changeLanguage = () => {
  console.log("111", locale, $vm.$i18n)
  $vm.$i18n.locale = $vm.$i18n.locale === "zh" ? "en" : "zh"; // 切换中英文
};


</script>
<style scoped>
.container{
  margin: 50px;
}
</style>


<i18n>
{
  "en": {
    "hello": "hello world! 2"
  },
  "zh": {
    "hello": "你好、世界！2"
  }
}
</i18n>